 <template>
  <div class="login">
    <!-- 关闭按钮 -->
    <div class="back_btn" @click="btnBack">
      <span class="iconfont icon-guanbi"></span>
    </div>
    <!-- logo部分 -->
    <div class="logo">
      <span class="iconfont icon-new1"></span>
    </div>
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="pattern"
        label="手机号码"
        placeholder="请输入手机号码"
        :rules="[{ pattern: pattern1, message: '请输入5-11位手机号码' },
        ]"
      />
      <van-field
        v-model="nickname"
        name="pattern"
        label="昵称"
        placeholder="请输入昵称"
        :rules="[{ pattern: pattern2, message: '请输入2-6位昵称' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="填写密码"
        :rules="[{ pattern:pattern3, message: '请输入3-11位密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      nickname: "",
      pattern1: /\d{5,11}/,
      pattern2: /.{2,9}/,
      pattern3: /.{3,11}/
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      console.log(this.username, this.password, this.nickname);
      this.$axios({
        url: "/register",
        method: "POST",
        data: {
          username: this.username,
          password: this.password,
          nickname: this.nickname
        }
      }).then(res => {
        console.log(res.data);
        const { message, data } = res.data;
        if (message === "注册成功") {
          this.$toast.success(message);
          this.$router.push("login");
        } else {
          this.$toast.fail(message);
        }
      });
    },
    btnBack() {
      // 返回上一页
      this.$router.back();
    }
  }
};
</script>

<style lang="less">
.login {
  padding: 20 /360 * 100vw;
  .back_btn span {
    font-size: 27 / 360 * 100vw;
  }
  .logo {
    text-align: center;
    margin: 50 /360 * 100vw 0;
    span {
      font-size: 40 / 360 * 100vw;

      color: #cc3300;
    }
  }

  .van-cell__title {
    color: #a1a1a1;
    font-size: 16 / 360 * 100vw;
  }
  .van-cell {
    padding: 10px 0;
    font-size: 16px;
    margin-bottom: 20 / 360 * 100vw;
  }
  .van-button {
    background-color: #cc3300;
    border: 0;
    margin-top: 50 / 360 * 100vw;
  }
}
</style>